<template>
  <div>
    <div class="current_pay">当前价格：{{ order_pay }} 元</div>
    <div class="scancode">
      <steambarcodereader @decode="getCode" />
    </div>
    <!-- 提示音 -->
    <welcomeAudioTip
      :audiourl="welcomeAudioTipurl"
      ref="child"
    ></welcomeAudioTip>
  </div>
</template>
<script>
import steambarcodereader from "@/components/steambarcodereader.vue";
import welcomeAudioTip from "@/components/welcomeAudioTip.vue";

export default {
  name: "FukuanView",
  components: {
    steambarcodereader,
    welcomeAudioTip,
  },
  data() {
    return {
      order_pay: localStorage.getItem("order_pay")
        ? localStorage.getItem("order_pay")
        : "",
      welcomeAudioTipurl: require("@/assets/media/paytip.mp3"), //初始化欢迎提示音,
      formData: {
        user_id: JSON.parse(localStorage.getItem("loginUser")).user_id,
        order_pay: localStorage.getItem("order_pay")
          ? localStorage.getItem("order_pay")
          : "",
        order_code: "",
      },
    };
  },
  mounted() {
    if (this.order_pay == "") {
      this.$$router.push("/setorder");
      return;
    }

    this.paymentAudioTip();
  },
  methods: {
    async getCode(txt) {
      console.log(txt);
      this.formData.order_code = txt;
      if (this.formData.order_code != "") {
        console.log(this.formData);
        let res = await this.$http.post("payment", this.formData);
        if (res.state == 200) {
            this.$router.push('/paysuccess');
        } else {
          alert(res.msg);
        }
      } else {
        this.$$router.push("/setorder");
      }
    },
    //提示音
    paymentAudioTip() {
      //点击下单结算，更换子组件音频地址并重新播放
      this.welcomeAudioTipurl = require("@/assets/media/paytip.mp3");
      //调用子组件方法
      this.$refs.child.play();
    },
    
  },
};
</script>
<style scoped>
.current_pay {
  margin: 25px auto;
  font-size: 24px;
  font-weight: 800;
}
</style>